<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 640px;
            height: 280px;
            border: 10px solid pink;
            margin: 30px auto;
            display: flex;
        }

        li {
            width: 160px;
            height: 100%;
            /* float: left; */
            overflow: hidden;
        }

        img {
            width: 520px;
            height: 280px;
            display: block;
        }
    </style>
</head>

<body>
    <!-- 520 280 -->
    <ul>
        <li><img src="01.jpg" alt="" /></li>
        <li><img src="02.jpg" alt="" /></li>
        <li><img src="03.jpg" alt="" /></li>
        <li><img src="04.jpg" alt="" /></li>
    </ul>

    <!-- <button>按钮</button> -->

    <script src="../jquery/jquery-3.6.0.js"></script>

    <script>
        // A状态 li 160px
        // B状态 li 520px 40px*3
        // A->B 鼠标进入某个li
        $("li").mouseenter(function () {
            console.log("mouseenter", $(this));

            // 之前的未完成动画全部原地停止
            $("li").stop()

            $(this)
                .animate(
                    { width: 520 },
                    500
                )
                .siblings().animate(
                    { width: 40 },
                    500
                )
        })

        // B-A 鼠标移出ul
        $("ul").mouseleave(function () {
            $("li").stop()

            $("li")
            .animate(
                { width: 160 },
                500
            )
        })

    </script>
</body>

</html>